<template>
  <!-- self点击自己的时候 -->
  <div>
    <!-- 导航 -->
    <div :class="{'open':isSort || isScreen}" @click.self="hideView">
      <div v-if="filterData" class="filter_wrap">
        <aside class="filter">
          <div
            class="filter-nav"
            v-for="(item,index) in filterData.navTab"
            :key="index"
            :class="{'filter-bold':currentFilter == index}"
            @click="filterSort(index)"
          >
            <span :class="{'show-filter':isfalse}">{{item.name}}</span>
            <i v-if="item.icon" :class="'fa fa-' + item.icon"></i>
          </div>
        </aside>
      </div>
    </div>
    <!-- 排序 -->
    <section class="filter-extend" v-if="isSort">
      <ul>
        <li v-for="(item,index) in filterData.sortBy" :key="index" @click="selectSort(item,index)">
          <span class="span" :class="{'selectName':currentSort == index}">{{item.name}}</span>
          <i class="fa fa-check" v-show="currentSort == index"></i>
        </li>
      </ul>
    </section>
    <!-- 筛选-->
    <section class="filter-extend" v-if="isScreen">
      <div class="filter-sort">
        <div v-for="(screen,index) in filterData.screenBy" :key="index" class="morefilter">
          <p class="title">{{screen.title}}</p>
          <ul>
            <li
              v-for="(item,i) in screen.data"
              :key="i"
              :class="{'selected':item.select}"
              @click="selectScreen(item,screen)"
            >
              <img v-if="item.icon" :src="item.icon" alt />
              <span>{{item.name}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="more-btn">
        <span class="floatLeft" :class="{'edit':edit}" @click="clearFilter">清空</span>
        <span class="floatRight" @click="filterOk">确定</span>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: "filterView",
  props: {
    filterData: Object,
  },
  data() {
    return {
      currentFilter: 0,
      isSort: false,
      isfalse: false,
      currentSort: 0,
      isScreen: false,
    };
  },
  computed: {
    edit() {
      let edit = false;
      this.filterData.screenBy.forEach((screen) => {
        screen.data.forEach((item) => {
          if (item.select) {
            edit = true;
          }
        });
      });
      return edit;
    },
  },
  methods: {
    // 这里暂时不理解
    filterOk() {
      let screenData = {
        MPI: "",
        offer: "",
        per: "",
      };
      let mpiStr = "";
      this.filterData.screenBy.forEach((screen) => {
        screen.data.forEach((item, index) => {
          if (item.select) {
            // 两种情况 1.多选 2.单选
            if (screen.id !== "MPI") {
              // 单选
              screenData[screen.id] = item.code;
            } else {
              // 多选
              mpiStr += item.code + ",";
              screenData[screen.id] = mpiStr;
            }
          }
        });
      });
      // console.log(mpiStr);
      this.$emit("update", { condition: screenData });
      this.hideView();
    },
    clearFilter() {
      this.filterData.screenBy.forEach((screen) => {
        screen.data.forEach((item) => {
          item.select = false;
        });
      });
    },
    selectScreen(item, screen) {
      // console.log(screen.id);
      if (screen.id !== "MPI") {
        // console.log(11);
        screen.data.forEach((ele) => {
          return (ele.select = false);
        });
      }

      item.select = !item.select;
    },
    selectSort(item, index) {
      this.currentSort = index;
      // 替换名字
      this.filterData.navTab[0].name = this.filterData.sortBy[index].name;
      this.hideView();
      // 更新数据
      this.$emit("update", { condition: item.code });
    },
    hideView() {
      this.isfalse = false;
      this.isSort = false;
      this.isScreen = false;
      this.$emit("searchFixed", false);
    },
    filterSort(index) {
      this.currentFilter = index;
      switch (index) {
        case 0:
          this.isfalse = true;
          this.isSort = true;
          //   传递事件到父组件
          this.$emit("searchFixed", true);
          break;
        case 1:
          this.$emit("update", {
            // 更新的是一个叫condition的数据
            condition: this.filterData.navTab[1].condition,
          });
          this.hideView();
          break;
        case 2:
          this.$emit("update", {
            // 更新的是一个叫condition的数据
            condition: this.filterData.navTab[2].condition,
          });
          this.hideView();
          break;
        case 3:
          this.isScreen = true;
          this.isSort = false;
          this.$emit("searchFixed", true);
          break;
        default:
          // 这里是蒙版的消失
          this.hideView();
          break;
      }
    },
  },
};
</script>

<style  scoped>
.filter {
  display: flex;
}
.filter-nav {
  flex: 1;
  float: left;
  height: 20px;
}
.filter-bold {
  font-weight: 900;
  color: rgb(20, 193, 89);
}
.open {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 3;
}
.show-filter {
  background-color: #fff;
  position: relative;
  top: 100px;
  left: 0;
}
.filter-extend {
  position: relative;
  top: -211px;
  left: -76px;
  color: #fff;
  z-index: 99999;
  font-size: 12px;
}
.filter-extend ul li {
  padding: 3px 0;
}
.filter-extend .fa {
  float: right;
  color: #009eef;
}
.selectName {
  color: #009eef;
}
.morefilter ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 0.8rem;
}
.morefilter li {
  box-sizing: border-box;
  width: 30%;
  height: 9.333vw;
  line-height: 9.333vw;
  margin: 0.8vw 1%;
  background: #961d1d;
}
.morefilter li img {
  width: 3.46667vw;
  height: 3.466667vw;
  vertical-align: middle;
  margin-right: 0.8vw;
}
.morefilter li span {
  margin-left: 2%;
  vertical-align: middle;
}
.floatRight {
  /* display: inline-block; */
  float: right;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 4px;
  background-color: rgb(42, 172, 142);
}
.floatLeft {
  /* display: inline-block; */
  float: left;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 4px;
  background-color: rgb(42, 172, 142);
}
.more-btn {
  padding-top: 40px;
}
.selected {
  color: #3190e8 !important;
  background-color: #edf5ff !important;
}
.edit {
  color: rgb(188, 6, 48) !important;
  background-color: yellow;
}
</style>